<template>
  <Layout :showHome="true" :showBtn="true" title="数据展示">
    <div class="echarts">
      <div class="one box" ref="oneNode"></div>
      <p>第一组考勤情况统计图</p>
      <div class="two box" ref="twoNode" ></div>
      <p>考勤积分统计图</p>
      <div class="three box" ref="threeNode"></div>
      <p>咱们结婚吧</p>
    </div>
    <Tabbar></Tabbar>
  </Layout>
</template>
<script setup>
import Tabbar from "../components/tabbar/index.vue";
import echarts from "echarts";
import { onMounted, onUnmounted, ref } from "vue";
const oneNode = ref();
const twoNode = ref();
const threeNode = ref();
let  timerOne = ref(null)
let  timerTwo = ref(null)
let  timerThree = ref(null)
// const arr=ref([])
onMounted(function () {
  const oneChart = echarts.init(oneNode.value);
  const twoChart = echarts.init(twoNode.value);
  const threeChart = echarts.init(threeNode.value);
  // 随机生成数据
  let arr = [];
  let arrTwo = [];
  let arrThree = [];
  //生成一个7个数字的数组
  function shuZu() {
    const arrOne = [];
    for (let i = 0; i < 3; i++) {
      arrOne.push(Math.floor(Math.random() * 280 + 5));
    }
    arrOne.push(Number((Math.random() * 4.1).toFixed(2)));
    for (let i = 0; i < 3; i++) {
      arrOne.push(Math.floor(Math.random() * 124 + 6));
    }
    arr.push(arrOne);
  }
  //生成[‘2022/11/8’,随机数,'字符串']格式的数组
  function randomDq(it){
    for (let m = 0; m < 21; m++) {
         const randYear = [];
          randYear.push('2022/11/'+(m+8));
          randYear.push(Math.floor(Math.random()*40+4))
          randYear.push(it)
          arrThree.push(randYear)
  }
  }
  // ['齐迎雪', '咱', '们', '结', '婚', '吧']
  randomDq('齐迎雪')
  randomDq('咱')
  randomDq('们')
  randomDq('结')
  randomDq('婚')
  randomDq('吧')
  // console.log(arrThree)
  
//生成30组7位数字的 数组
  for (let j = 0; j < 30; j++) {
    shuZu();
  }
//生成一个7个数字的数组
  for (let k = 0; k < 7; k++) {
      arrTwo.push(Math.floor(Math.random() * 260 + 80));
  }
//赋初始值
let dataBJ = arr;
let dataSH = arr;
//动态改变数据并且渲染页面
  timerOne = setInterval(function () {
    arr = [];
    for (let j = 0; j < 30; j++) {
      shuZu();
    }
    dataBJ = arr;
    dataSH = arr;
 const option = {
    backgroundColor: "#161627",
    title: {
      text: "总有些惊奇的际遇",
      left: "left",
      top: 10,
      textStyle: {
        color: "#f5222d",
        fontSize: 16,
      },
    },
    legend: {
      bottom: 0,
      data: ["AnShun", "ChengDu"],
      itemGap: 20,
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      selectedMode: "single",
    },
    radar: {
      indicator: [
        { name: "张体龙", max: 300 },
        { name: "冯进茹", max: 250 },
        { name: "陈卓", max: 300 },
        { name: "邹回", max: 5 },
        { name: "陈霞", max: 200 },
        { name: "唐玉", max: 150 }
      ],
      shape: "circle",
      splitNumber: 5,
      axisName: {
        color: "rgb(238, 197, 102)",
      },
      splitLine: {
        lineStyle: {
          color: [
            "rgb(198, 29, 29,1 )",
            "rgb(229, 102, 33)",
            "rgb(223, 230, 26)",
            "rgb(16, 229, 73)",
            "rgb(16, 218, 229)",
            "rgb(208, 16, 229)",
          ].reverse(),
        },
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgb(255, 255, 255)",
        },
      },
    },
    series: [
      {
        name: "AnShun",
        type: "radar",
        lineStyle: lineStyle,
        data: dataBJ,
        symbol: "none",
        itemStyle: {
          color: "#F9713C",
        },
        areaStyle: {
          opacity: 0.1,
        },
      },
      {
        name: "ChengDu",
        type: "radar",
        lineStyle: lineStyle,
        data: dataSH,
        symbol: "none",
        itemStyle: {
          color: "#B3E4A1",
        },
        areaStyle: {
          opacity: 0.05,
        },
      }
    ],
  };
  oneChart.setOption(option);
    console.log('第一个echarts图定时器')
  }, 1000);
  //动态显示第二个echarts图
  timerTwo = setInterval(function(){
          arrTwo=[]
            for (let k = 0; k < 7; k++) {
            arrTwo.push(Math.floor(Math.random() * 260 + 80));
        }
        // console.log(arrTwo)
        const optionTwo={
            color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
            title: {
                text: '比方说当我遇见你',
                left:175,
                top:25,
                textStyle: {
                color: '#f5222d',
                fontSize:16
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: 'red'
                }
                }
            },
            legend: {
                data: ['蒙奇', '韩信', '赵菠萝', '冬至', '四光']
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: '蒙奇',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: arrTwo
                },
                {
                name: '韩信',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0, 221, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(77, 119, 255)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                //   data: [120, 282, 111, 234, 220, 340, 310]
                data: arrTwo
                },
                {
                name: '赵菠萝',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(55, 162, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(116, 21, 219)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                //   data: [320, 132, 201, 334, 190, 130, 220]
                data: arrTwo
                },
                {
                name: '冬至',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 0, 135)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(135, 0, 157)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                //   data: [220, 402, 231, 134, 190, 230, 120]
                data: arrTwo
                },
                {
                name: '四光',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 191, 0)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(224, 62, 76)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                //   data: [220, 302, 181, 234, 210, 290, 150]
                data: arrTwo
                }
            ]
            }
        twoChart.setOption(optionTwo);
      },100)
  timerThree = setInterval(function(){
        //   arrThree=[]
        //     for (let l = 0; l < 21; l++) {
        //     arrThree.push(Math.floor(Math.random() * 260 + 80));
        // }
          arrThree=[]
          randomDq('齐迎雪')
          randomDq('咱')
          randomDq('们')
          randomDq('结')
          randomDq('婚')
          randomDq('吧')
          // console.log(arrThree)
        const optionThree = {
    title: {
    text: '你那双温柔剔透的眼睛',
    left: 'center',
    top:28,
    textStyle: {
      color: '#f5222d',
      fontSize:16
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(0,0,0,0.2)',
        width: 1,
        type: 'solid'
      }
    }
  },
  legend: {
     data: ['齐迎雪', '咱', '们', '结', '婚', '吧']
  },
  singleAxis: {
    top: 25,
    bottom:50,
    axisTick: {},
    axisLabel: {},
    type: 'time',
    axisPointer: {
      animation: true,
      label: {
        show: true
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.2
      }
    }
  },
  series: [
    {
      type: 'themeRiver',
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.8)'
        }
      },
      data: arrThree
    }
  ]
};
        threeChart.setOption(optionThree);
      },1000)
  const lineStyle = {
    width: 1,
    opacity: 0.5,
  };
  const option = {
    backgroundColor: "#161627",
    title: {
      text: "总有些惊奇的际遇",
      left: "left",
      top: 10,
      textStyle: {
        color: "#f5222d",
        fontSize: 16,
      },
    },
    legend: {
      bottom: 0,
      data: ["AnShun", "ChengDu"],
      itemGap: 20,
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      selectedMode: "single",
    },
    radar: {
      indicator: [
        { name: "张体龙", max: 300 },
        { name: "冯进茹", max: 250 },
        { name: "陈卓", max: 300 },
        { name: "邹回", max: 5 },
        { name: "陈霞", max: 200 },
        { name: "唐玉", max: 150 }
      ],
      shape: "circle",
      splitNumber: 5,
      axisName: {
        color: "rgb(238, 197, 102)",
      },
      splitLine: {
        lineStyle: {
          color: [
            "rgb(198, 29, 29,1 )",
            "rgb(229, 102, 33)",
            "rgb(223, 230, 26)",
            "rgb(16, 229, 73)",
            "rgb(16, 218, 229)",
            "rgb(208, 16, 229)",
          ].reverse(),
        },
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgb(255, 255, 255)",
        },
      },
    },
    series: [
      {
        name: "AnShun",
        type: "radar",
        lineStyle: lineStyle,
        data: dataBJ,
        symbol: "none",
        itemStyle: {
          color: "#F9713C",
        },
        areaStyle: {
          opacity: 0.1,
        },
      },
      {
        name: "ChengDu",
        type: "radar",
        lineStyle: lineStyle,
        data: dataSH,
        symbol: "none",
        itemStyle: {
          color: "#B3E4A1",
        },
        areaStyle: {
          opacity: 0.05,
        },
      },
    ],
  };
  const optionTwo={
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '比方说当我遇见你',
    left:175,
    top:25,
    textStyle: {
      color: '#f5222d',
      fontSize:16
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: 'red'
      }
    }
  },
  legend: {
    data: ['蒙奇', '韩信', '赵菠萝', '冬至', '四光']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '蒙奇',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: arrTwo
    },
    {
      name: '韩信',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    //   data: [120, 282, 111, 234, 220, 340, 310]
      data: arrTwo
    },
    {
      name: '赵菠萝',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    //   data: [320, 132, 201, 334, 190, 130, 220]
    data: arrTwo
    },
    {
      name: '冬至',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    //   data: [220, 402, 231, 134, 190, 230, 120]
    data: arrTwo
    },
    {
      name: '四光',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
    //   data: [220, 302, 181, 234, 210, 290, 150]
    data: arrTwo
    }
  ]
  };
  const optionThree = {
  title: {
    text: '出现在我梦里',
    left: 'center',
    top:28,
    textStyle: {
      color: '#f5222d',
      fontSize:16
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(0,0,0,0.2)',
        width: 1,
        type: 'solid'
      }
    }
  },
  legend: {
    data: ['齐迎雪', '咱', '们', '结', '婚', '吧']
    // data:['DQ','TY','SS','QG','SY','DD']
  },
  singleAxis: {
    top: 25,
    bottom:20,
    axisTick: {},
    axisLabel: {},
    type: 'time',
    axisPointer: {
      animation: true,
      label: {
        show: true
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.2
      }
    }
  },
  series: [
    {
      type: 'themeRiver',
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.8)'
        }
      },
      data: arrThree
    }
  ]
};
//初始化渲染三个echarts图
  oneChart.setOption(option);
  twoChart.setOption(optionTwo);
  threeChart.setOption(optionThree);
  // console.log(arrThree)
});
onUnmounted(function(){
      clearInterval(timerOne)
      clearInterval(timerTwo)
      clearInterval(timerThree)
      // console.log('我离开echarts页面了')
})
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 86.5vh;
  border: 1px solid black;
  overflow-y: scroll;
  .one {
    margin-top: 2vh !important;
  }
  .box {
    width: 90vw;
    height: 35vh;
    background-color: white;
    margin: auto;
  }
  p {
    font-size: 0.7rem;
    text-align: center;
    display: block;
    width: 100%;
    height: 2vh;
    line-height: 2vh;
  }
  .van-swipe {
    height: 100%;
    background-color: white;
  }
}
</style>